// 'use client'
// import { Button, } from 'antd'
// import axios from 'axios'
// import React, { ChangeEvent, useState } from 'react'
// import { Progress } from 'tdesign-react';
// import 'tdesign-react/es/style/index.css';
// import SparkMD5 from 'spark-md5'


// //上传状态 
// type UploadStatus = 'idle' | 'uploading' | 'success' | 'error'
// // 1MB
// const CHUNK_SIZE = 1024 * 1024

// export default function FileUploader() {
//   const [file, setFile] = useState<File | null>(null)
//   const [status, setStatus] = useState<UploadStatus>('idle')
//   const [uploadLong, setUploadLong] = useState(0)
//   // 选择文件时，读取上传的文件
//   let handleFileChange = (e: Event) => {
//     let files = (e.target as HTMLInputElement).files
//     if (files) {
//       setFile(files[0])
//       // console.log(file);
//       createChunks(files[0])
//     }
//   }
//   // 对文件进行切片
//   let createChunks = (files: File) => {
//     let cur = 0
//     let chunks = []

//     while (cur < files.size) {
//       let bob = files.slice(cur, cur + CHUNK_SIZE)
//       chunks.push(bob)
//       cur += CHUNK_SIZE
//     }

//     return chunks
//   }
//   // 计算hash值
//   let calculateHash = (chunks: Blob[]) => {
//     // 第一个和最后一个切片全部参与计算
//     // 中间的切片只计算前面两个字节，中间两个字节，最后两个字节
//     let targets:Blob[] = []   //存储所有参与计算的切片

//     let spark=new SparkMD5.ArrayBuffer()
//     let fileReader=new FileReader()


//     chunks.forEach((chunk, index) => {
//       if (index === 0 || index === chunks.length - 1) {
//         // 第一个和最后一个切片全部参与计算
//         targets.push(chunk)
//       } else {
//         // 中间的切片只计算前面两个字节，中间两个字节，最后两个字节
//         targets.push(chunk.slice(0,2))//前面的两个字节
//         targets.push(chunk.slice(CHUNK_SIZE/2,CHUNK_SIZE/2+2))//中间的两个字节
//         targets.push(chunk.slice(CHUNK_SIZE-2,CHUNK_SIZE))//最后的两个字节
//       }
//     })

//     fileReader.readAsArrayBuffer(new Blob(targets))
//     fileReader.onload=(e)=>{
//       spark.append((e.target as FileReader).result)
//       console.log('hash：'+spark.end);
      
//     }
//   }


//   let handleFileUpload = async () => {
//     if (!file) return
//     setStatus('uploading')
//     setUploadLong(0)

//     // 文件分片
//     const chunks = createChunks(file)
//     // console.log(chunks);

//     // 计算hash值
//     calculateHash(chunks)

//     let formData = new FormData()
//     formData.append('file', file)
//     console.log(formData, file);
//     try {
//       await axios.post('http://localhost:3000/upload', formData, {
//         headers: {
//           'Content-Type': 'multipart/form-data'
//         },
//         onUploadProgress(progressEvent) {
//           const progress = progressEvent.total
//             ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
//           setUploadLong(progress)
//         },
//       })
//       setStatus('success')
//       setUploadLong(100)
//     } catch {
//       setStatus('error')
//       setUploadLong(0)
//     }
//   }
//   return (
//     <div>
//       <input type="file" multiple onChange={handleFileChange} />
//       {
//         file && (
//           <div>
//             <p>File name：{file.name}</p>
//             <p>Size：{(file.size / 1024).toFixed(2)}</p>
//             <p>Type：{file.type}</p>
//           </div>
//         )
//       }
//       {
//         status === 'uploading' && (
//           <Progress theme="plump" percentage={uploadLong} />
//         )
//       }

//       {file && status !== 'uploading' && <Button onClick={handleFileUpload}>Upload</Button>}

//       {status === 'success' && (
//         <p>ok了</p>
//       )}
//       {
//         status === 'error' && (
//           <p>啧，败了</p>
//         )
//       }
//     </div>
//   )
// }